<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <link rel="icon" href="./favicon.ico"/>
  <title>解决方案-租享家</title>
  <link rel="stylesheet" href="./libs/uikit/css/uikit.min.css">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_938989_wfn8mzlz6t.css">
  <link rel="stylesheet" href="./css/animate.css">
  <link rel="stylesheet" href="css/reset.css"/>
  <link rel="stylesheet" href="css/head.css"/>
  <link rel="stylesheet" href="./libs/swiper/css/swiper.min.css"/>
  <link rel="stylesheet" href="css/style.css"/>

</head>
<body>
<div id="app">
  <!-- 导航菜单 -->
  <div class="headers">
    <header class="header">
      <div class="clearfix">
        <div class="fl left">
          <a href="javascript:void(0)"><img src="image/logo.png" alt="" class="img1"/></a>
        </div>
        <div class="fr nav">
          <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
            <li><a href="./index.html">首页</a></li>
            <li class="dropdown">
              <a href="./solution.html" class="active">解决方案 <span class="iconfont icon-bottom"></span></a>
              <div class="dropdown_menu">
                <a href="./solution-shop.html">分销商城</a>
                <a href="./solution-zxj.html">租享家管理</a>
              </div>
            </li>
            <li><a href="./examples.html">应用案例</a></li>
            <li><a href="./orders.html">定制服务</a></li>
            <li><a href="./about.html">关于我们</a></li>
          </ul>
        </div>
        <a href="javascript:void(0)" id="navToggle">
          <span></span>
        </a>
      </div>
    </header>
    <div class="m_nav">
      <div class="top clearfix">
        <img src="image/closed.png" alt="" class="closed"/>
      </div>
      <div class="logo">
        <img src="image/logo2.png" alt=""/>
      </div>
      <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
        <li><a href="./index.html">首页</a></li>
        <li class="dropdown">
          <a href="javascript:void(0)" class="active">解决方案 <span class="iconfont icon-bottom fr"></span> </a>
          <div class="dropdown_menu">
            <a href="./solution.html">方案预览</a>
            <a href="./solution-shop.html">分销商城</a>
            <a href="./solution-zxj.html">租享家管理</a>
          </div>
        </li>
        <li><a href="./examples.html">应用案例</a></li>
        <li><a href="./orders.html">定制服务</a></li>
        <li><a href="./about.html">关于我们</a></li>
      </ul>
    </div>
  </div>

  <!-- 轮播-数据 -->
  <div class="banner solution-banner">
    <img class="uk-visible@m" src="./image/solution_shop_banner.png" alt="九鸟banner">
    <img class="uk-hidden@m" src="./image/shop_banner_wap.jpg" alt="九鸟banner">
  </div>

  <!--九鸟分销系统-->
  <div class="item-padding wow fadeInUp websit shop-share">
    <div class="uk-container">
      <div class="index-comm-title comm-title-small">
        <p class="title-en">九鸟分销系统</p>
        <p class="title-zh">低门槛，低壁垒，裂变速度快，让微商在移动社交电商中获得裂变价值</p>
      </div>
      <div class="uk-grid uk-child-width-1-4@m websit-list">
        <div class="websit-item" v-for="(item,index) in sysList" :key="index">
          <div class="item-container" :class="item.active==1?'item-container-active':''" @mouseover="systemOver(index)">
            <span class="item-ic iconfont" :class="item.icon"></span>
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc" v-html="item.desc"></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--功能-->
  <div class="item-padding shop-func wow fadeInUp">
    <div class="uk-container">
      <div class="uk-grid">
        <div class="uk-width-2-5@m">
          <div class="display-pic">
            <img src="./image/shop_mine.png" alt="">
          </div>
        </div>
        <div class="uk-width-3-5@m">
          <div class="uk-grid uk-child-width-1-4 func-list">
            <div class="func-item" v-for="(item,index) in dispList" :key="index"
              :class="item.active==1?'func-item-active':''" @mouseover="dispOver(index)">
              <span class="item-ic iconfont" :class="item.icon"></span>
              <p class="item-name">{{item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--示意图-->
  <div class="item-padding shop-display wow fadeInUp">
    <div class="uk-container">
      <div class="index-comm-title comm-title-small">
        <p class="title-en">九鸟微商城的界面是什么样的</p>
        <p class="title-zh">佣金比例可后台设置修改</p>
      </div>
      <div class="dis-img"><img src="./image/shop_desc.png" alt=""></div>
    </div>
  </div>

  <!--优势-->
  <div class="item-padding wow fadeInUp websit shop-adv">
    <div class="uk-container">
      <div class="index-comm-title comm-title-small">
        <p class="title-en">微信商城6大优势，让您轻松赚大钱</p>
      </div>
      <div class="websit-list">
        <div class="swiper-container" id="shopAdv">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in weshopList" :key="index">
              <div class="websit-item">
                <div class="item-container" :class="item.active==1?'item-container-active':''">
                  <span class="item-ic iconfont icon-zhuanshudingzhi"></span>
                  <p class="item-title">移动PC平台跨越</p>
                  <p class="item-desc">助您跨越传统互联网和移动互联网的电商应用。全面进入微信端，迅速抢占市场先机，打造双平台盈利</p>
                </div>
              </div>
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
          <!-- add arrows -->
          <div class="arrows uk-visible@m">
            <span class="m-prev iconfont icon-changjiantou-copy"></span>
            <span class="m-next iconfont icon-jiantou6"></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 流程 -->
  <div class="item-padding wow fadeInUp shop-progress">
    <div class="uk-container">
      <div class="index-comm-title comm-title-small">
        <p class="title-en">九鸟微信商城完善的购物流程体验</p>
      </div>
      <div class="swiper-container" id="shopProgress">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/6)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/7)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/8)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/9)"></div>
          <div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/10)"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>

  <!--尾部-->
  <div class="footer wow fadeInUp">
    <div class="uk-container">
      <div class="uk-grid">
        <div class="uk-width-1-3@m">
          <h1 class="footer-name">上海九鸟软件有限公司</h1>
          <p class="footer-contact-item"><span class="iconfont icon-weibiaoti-"></span>电话：18862486210</p>
          <p class="footer-contact-item"><span class="iconfont icon-youxiang-"></span>地址：昆山市和丰路108号太平洋商业广场1233室</p>
          <p class="footer-contact-item"><span class="iconfont icon-dizhi"></span>邮箱：105498540@qq.com</p>
        </div>
        <div class="uk-width-2-3@m sub-info">
          <div class="uk-grid uk-child-width-1-3@m">
            <div class="input-item"><input type="text" placeholder="姓名"></div>
            <div class="input-item"><input type="text" placeholder="邮箱"></div>
            <div class="input-item"><input type="text" placeholder="电话"></div>
          </div>
          <div class="sub-desc"><textarea placeholder="内容"></textarea></div>
          <button class="uk-button uk-button-primary btn-sub">提交</button>
        </div>
      </div>
    </div>
  </div>

  <!--底部地图-->
  <div class="footer-map wow fadeInUp">
    <div class="uk-container">
      <a class="map-item" href="index.html">首页 </a>|
      <a class="map-item map-item-active" href="solution.html"> 解决方案 </a>|
      <a class="map-item" href="examples.html"> 应用案例 </a>|
      <a class="map-item" href="orders.html"> 定制服务 </a>|
      <a class="map-item" href="about.html"> 关于我们 </a>
    </div>
    <p class="copy-right">备案号:沪ICP备xxxxx号</p>
  </div>

  <!--返回顶部-->
  <span id="toTop" class="iconfont icon-fanhuidingbu to-top hide"></span>
</div>


<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script src="./libs/wow.min.js"></script>
<script src="./libs/uikit/js/uikit.min.js"></script>
<script src="./js/header.js"></script>
<script src="./libs/swiper/js/swiper.min.js"></script>
<script src="./datas/shop.js"></script>
</body>
</html>